<template>
  <div class="body_">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="数据统计" name="first">
        <el-container>
          <el-header>
            <div class="TitleForm">
              <el-form ref="form" :model="TitleForm" label-width="120px" inline>
                <el-form-item label="输入名称" >
                  <el-input
                    placeholder="请输入名称或编码"
                    v-model="TitleForm.name"
                  ></el-input>
                </el-form-item>
                <el-form-item label="状态">
                  <el-select v-model="TitleForm.state" placeholder="请选择信息">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="选择日期">
                  <el-date-picker
                    v-model="TitleForm.time"
                    type="date"
                    placeholder="请选创建时间"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-form>
            </div>
          </el-header>
          <el-main>
            <el-table :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" :data="tableData" style="width: 100%">
              <el-table-column prop="date" label="日期" width="180">
              </el-table-column>
              <el-table-column prop="name" label="区域" width="180">
              </el-table-column>
              <el-table-column prop="address" label="设备号"> </el-table-column>
              <el-table-column prop="address" label="运行状态">
              </el-table-column>
              <el-table-column prop="address" label="操作">
                <template slot-scope="scope">
                  <span class="operter">{{scope.row.operte}}</span>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <div class="block" style="margin-top: 15px">
              <el-pagination
                align="center"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[1, 5, 10, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.length"
              >
              </el-pagination>
            </div>
          </el-main> </el-container
      ></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import permission from '@/directive/permission/index.js' // 权限判断指令
export default {
  directives: { permission },
  data() {
    return {
      activeName: "first",
      tableData: [
        {
          date: "2016-05-02",
          name: "xx园",
          address: "02151",
          state: "正常",
          operte: "操作",
        },
        {
          date: "2017-05-02",
          name: "xx园",
          address: "02151",
          state: "正常",
          operte: "操作",
        },
        {
          date: "2018-05-02",
          name: "xx园",
          address: "02151",
          state: "正常",
          operte: "操作",
        },
        {
          date: "2019-05-02",
          name: "xx园",
          address: "02151",
          state: "正常",
          operte: "操作",
        },
      ],
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 10, // 每页的数据条数

      TitleForm: {
        name: "",
        state: "",
        time: "",
      },
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleSizeChange() {},
    handleCurrentChange() {},
  },
};
</script>

<style lang="scss" scoped>
.body_ {
  padding: 0 0.3rem /* 24/80 */;
  .el-tabs {
    padding: 0.2625rem /* 21/80 */ 0;
    .el-header {
      width: 100%;
      height: 0.85rem /* 68/80 */;
      border-radius: 4px;
      background-color: rgb(255, 255, 255);
      box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    }
    .el-main {
      margin-top: 0.3rem /* 24/80 */;
      width: 100%;
      height: 7.725rem /* 618/80 */;
      border-radius: 4px;
      background-color: rgb(255, 255, 255);
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    }

  }

}
.operter{
      color:rgba(59, 140, 255, 1) !important;
      cursor: pointer;
    }
</style>
